<script setup lang="ts">
defineOptions({
  name: "MACHINE_CONSUMABLEITEMSLIFECYCLE_FILTER_BAG_ALGORITHM"
});
import { ref, reactive } from "vue";
import weatherTop from "../../operation/environmentTestManage/components/weatherTop/index.vue";
import timeItem from "../../operation/environmentTestManage/components/timeItem/index.vue";
import algorithmFactors from "./algorithmFactors.vue";
import algorithmFactorsScatter from "./algorithmFactorsScatter.vue";
import algorithmLifeCycleHistory from "./algorithmLifeCycleHistory.vue";
import algorithmLifeCyclePredict from "./algorithmLifeCyclePredict.vue";
import { http } from "@/utils/http";
type ResultTable = {
  total?: number;
  data?: Array<any>;
};

//查询SPC指标列表
const queryList = (data?: object) => {
  return http.request<ResultTable>("post", `/operation/api/v1/machine/correlationFactors/queryCorrelationFactorList`, {
    data
  });
};

const factors = ref<any[]>([]);
queryList({}).then(res => {
  factors.value = res?.listFactor;
});
</script>

<template>
  <div class="alrotithm-wrapper">
    <div class="top_box borderRidus">
      <timeItem />
      <weatherTop />
    </div>

    <div class="lifecycle-wrapper">
      <!-- <div class="content-wrapper lifecyle-predict-wrappper">
        <div class="wrapper-title">
          <div class="wrapper-title-left"></div>
          <div class="wrapper-title-right">AI寿命预测分析</div>
        </div>
        <algorithmLifeCyclePredict />
      </div> -->
      <div class="content-wrapper lifecyle-history-wrappper">
        <div class="wrapper-title">
          <div class="wrapper-title-left"></div>
          <div class="wrapper-title-right">AI历史寿命</div>
        </div>
        <algorithmLifeCycleHistory />
      </div>
    </div>
    <div class="content-wrapper">
      <div class="wrapper-title">
        <div class="wrapper-title-left"></div>
        <div class="wrapper-title-right">因子相关性</div>
      </div>
      <algorithmFactors :factors="factors" />
    </div>
    <div class="content-wrapper">
      <div class="wrapper-title">
        <div class="wrapper-title-left"></div>
        <div class="wrapper-title-right">因子散点图</div>
      </div>
      <algorithmFactorsScatter :factors="factors" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.alrotithm-wrapper {
  width: 100%;

  .top_box {
    display: flex;
    padding: 16px;
    margin-bottom: 16px;
    background-color: #fff;
  }
  .borderRidus {
    border-radius: 4px;
  }

  .lifecycle-wrapper {
    display: flex;
    width: 100%;
    margin-bottom: 16px;

    .lifecyle-predict-wrappper {
      width: 50%;
      margin-right: 8px;
      border-radius: 4px;
      background-color: #fff;
    }

    .lifecyle-history-wrappper {
      width: 100%;
      border-radius: 4px;
      background-color: #fff;
    }
  }

  .content-wrapper {
    margin-bottom: 16px;
    border-radius: 4px;
    background-color: #fff;
    padding: 16px 24px;
    .wrapper-title {
      display: flex;
      justify-content: flex-start;
      width: 100%;
      height: 32px;
      margin-bottom: 16px;
      .wrapper-title-left {
        width: 3px;
        height: 100%;
        background-color: #3b82f6;
      }
      .wrapper-title-right {
        width: 280px;
        height: 32px;
        padding-left: 8px;
        background-image: linear-gradient(to right, rgb(59, 130, 246), #fff);
        background: linear-gradient(270deg, rgba(59, 130, 246, 0) 0%, rgba(59, 130, 246, 0.24) 100%);
        font-size: 18px;
        font-family: PingFangSC-Medium, "PingFang SC";
        font-weight: 500;
        color: #000000;
        line-height: 32px;
      }
    }
  }
}
</style>
